<template>
    <div class="preview-page">
        <div style="display:none">
            <div id='hour'></div>
            <div id='year'></div>
        </div>
        <div class="header">
            <cjc-nav :title="this.$store.state.fileTemplateName" @customRouter="customRouter" :btn3="timer" class="daohang"></cjc-nav>
            <!-- 学生信息 -->
            <div class="stuMessage">
                <div class="userImg"><img :src="this.$store.state.userInfo.icon" width="95px" height="95px"></div>
                <div style="margin-top:3%">
                    <table class="userMsg">
                        <tr>
                            <td>姓名：<span> {{ this.$store.state.userInfo.XM }} </span></td>
                            <td>学校：<span> {{ this.$store.state.userInfo.XQMC }} </span></td>
                        </tr>
                        <tr>
                            <td>学号：<span> {{ this.$store.state.userInfo.KEY_ID }} </span></td>
                            <td>班级：<span> {{ this.$store.state.userInfo.BJMC }} </span></td>
                        </tr>
                        <tr>
                            <td>性别：<span> {{ this.$store.state.userInfo.XB }} </span></td>
                            <!-- <td>培养层次：<span> {{ userInfo.level }} </span></td> -->
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="pageContent">
            <div class="notice" v-show="notice">
                <p>特别说明：</p>
                <p>本成绩单由西南财经大学天府学院教务处出具，未经许可，不得非法复制，篡改。学校保留采取法律手段的权利</p>
            </div>
            <div class="content">
                <!-- <button v-on:click='Toggle()'>Toggle</button> -->
                <div id="previewDiv" class="preview">
                    <!-- <img id="page1" src="static/images/credits.png"> -->
                </div>
            </div>
            <div class="page-watcher">
                <div>第<span class="current-page">1</span>页</div>
                <div>共<span>2</span>页</div>
            </div>
        </div>
        <div class="pageBottom">
            <div class="printNum"> 
                <div class="inbutton" @click="substrict" :class="{'inbuttonColorA': isA, 'inbuttonColorB': isB}"> <i class="icon iconfont icon-icon--1"></i> </div>
                <div class="incenter" v-text="count"></div>
                <div class="inbutton" @click="add" :class="{'inbuttonColorA': isC, 'inbuttonColorB': isD}"> <i class="icon iconfont icon-icon--"></i></div>
                <div class="inright">(份)</div>
            </div>
            <div class="printButton">
                <Button type="primary" style="width:100%; height:120px; font-size:30px;" @click="goPayment()">立即打印</Button>
            </div>
        </div>
        <!-- 打印支付页面 -->
        <!-- <Modal v-model="payPrint" width="500" class="ivu-modal" :mask-closable="false">
            <div class="payPrintHeader">
                <div class="payPrintHeaderTop">
                    您需要支付
                </div>
                <div class="payPrintHeaderContent">
                    <span style="font-size:30px;">￥</span><span style="font-size:100px;"> {{ this.totalPrice }} </span>
                </div>
                <div class="payPrintHeaderBottom">
                    <ul>
                        <li><div class="countNum">单价</div><div class="priceNum"> {{ this.unitPrice }}元 </div></li>
                        <li><div class="countNum">页数</div><div class="priceNum"> {{ this.pageNum }}页 </div></li>
                        <li><div class="countNum">份数</div><div class="priceNum"> {{ this.count }}份 </div></li>
                    </ul>
                </div>
            </div>
            <div class="payPrintContent">
                <div class="payPrintContentTop">
                    <span @click="goSaoMa"><img src="static/images/erweim.png" width="60px" height="60px"></span>
                </div>
                <div class="payPrintContentContent">
                    <img src="static/images/支付.jpg" width="150px" height="300px;">
                </div>
                <div class="payPrintContentBottom">请继续在TFinfo支付页面进行操作</div>
            </div>
            <div slot="close"></div>
            <div slot="footer">
                <Button size="large" @click="del" class="cancel">取消({{ this.seconds }}s)</Button>
            </div>
        </Modal> -->
        <!-- 支付打印二维码页面 -->
        <Modal v-model="saoMa" width="500" :mask-closable="false" :styles="{padding: '0 !important'}">
            <div class="payPrintHeader">
                <div class="payPrintHeaderTop">
                    您需要支付
                </div>
                <div class="payPrintHeaderContent">
                    <span style="font-size:30px;">￥</span><span style="font-size:100px;"> {{ this.totalPrice }} </span>
                </div>
                <div class="payPrintHeaderBottom">
                    <ul>
                        <li><div class="countNum">单价</div><div class="priceNum"> {{ this.unitPrice }}元 </div></li>
                        <li><div class="countNum">页数</div><div class="priceNum"> {{ this.pageNum }}页 </div></li>
                        <li><div class="countNum">份数</div><div class="priceNum"> {{ this.count }}份 </div></li>
                    </ul>
                </div>
            </div>
            <div class="payPrintContent">
                <div class="payPrintContentTop">
                    <!-- <span @click="goBack"><img src="static/images/返回.png" width="60px" height="60px"></span> -->
                </div>
                <div class="payPrintContentContent1">请使用支付宝或微信扫描下方二维码</div>
                <div class="payPrintContentBottom1">
                    <div class="payPrintContentAlipay"><div class='login-qrcode'>
                    <qrcode-vue :value='LoginQRvalue' :size='130'></qrcode-vue>
                    </div>支付宝</div>
                    <div class="payPrintContentWechat"><img src="static/images/微信.png" width="130px" height="130px">微信</div>
                </div>
            </div>
            <div slot="close"></div>
            <div slot="footer"  @click="del" class="pay-cancel">
                取消({{ this.seconds }}s)
            </div>
        </Modal>
        <!-- 打印中页面 -->
        <Modal v-model="printing" :mask-closable="false">
            <div slot="close"></div>
            <div class="printing">
                正在打印中，请勿中断操作...
            </div>
            <div slot="footer"></div>
        </Modal>
        <!-- 打印完成页面 -->
        <Modal v-model="printFinish" :mask-closable="false">
            <div slot="close"></div>
            <div class="printed">
                <!-- <Icon type="ios-checkmark"></Icon> -->
                <p class="printedIcon"><Icon type="emichenggong" class="printedIcon1"></Icon></p>
                <p>打印完成，感谢使用！</p>
                <p>是否继续操作？</p>
            </div>
            <div slot="footer">
                <Button size="large" @click="continuePrint" class="goPrint">继续操作()</Button>
            </div>
        </Modal>
        <!-- 墨水已空页面 -->
        <Modal class-name="printingFile">
            <div slot="close"></div>
            <div class="printing">
                <p>墨水已空，请等待设备维修</p>
                <p style="color:#009aff">10s</p>
            </div>
            <div slot="footer"></div>
        </Modal>
        <!-- 纸槽已空页面 -->
        <Modal class-name="printingFile">
            <div slot="close"></div>
            <div class="printing">
                <p>纸槽已空，请等待设备维修</p>
                <p style="color:#009aff">10s</p>
            </div>
            <div slot="footer"></div>
        </Modal>
        <!-- 设备故障页面 -->
        <Modal class-name="printingFile">
            <div slot="close"></div>
            <div class="printing">
                <p>设备故障，请等待设备维修</p>
                <p style="color:#009aff">10s</p>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'
export default {
    name: 'tables',
    created() {
        setTimeout(this.timeValid, 1000)
        // this.getFileInfo()
        this.setFileInfoWatcher()
    },
    data() {
        return {
            LoginQRvalue: '',
            // userInfo: {
            //     name: '李四',
            //     sex: '女',
            //     college: '西南财经大学天府学院',
            //     stuNum: '41400812',
            //     major: '计算机科学与技术',
            //     level: '本科(四年)',
            //     avtor: 'static/images/tx.png'
            // },
            // fileInfo: [
            //     {fileName: '成绩单打印', fileContent: 'static/images/成绩单.png', fileNotice: 'asdssad'},
            //     {fileName: '成绩单打印', fileContent: 'static/images/成绩单.png', fileNotice: 'asdssad'},
            //     {fileName: '成绩单打印', fileContent: 'static/images/成绩单.png', fileNotice: 'asdssad'},
            //     {fileName: '成绩单打印', fileContent: 'static/images/成绩单.png', fileNotice: 'asdssad'}
            // ],
            // payPrint: false,
            printing: false,
            notice: true,
            printFinish: false,
            saoMa: false,
            isA: true,
            isB: false,
            isC: false,
            isD: true,
            timer: 60,
            // timer1: null,
            unitPrice: 1,
            pageNum: 1,
            totalPrice: 1,
            count: 1,
            seconds: '',
        }
    },
    methods: {
        setFileInfoWatcher() {
            console.log('function is called')
            let printTime = setInterval(() => {
                if (this.$store.state.filePreciewList !== undefined && this.$store.state.filePreciewList !== '') {
                    try {
                        let imageUrl
                        if (this.$store.state.filePreciewList.fileName !== undefined) {
                            imageUrl = this.$store.state.filePreciewList.fileName.split(',')
                        } else {
                            imageUrl = this.$store.state.filePreciewList.result.split(',')
                        }
                        console.log('imgUrl', imageUrl)
                        let tempDiv = document.getElementById('previewDiv')
                        if (imageUrl.length > 0) {
                            for (let i = 0; i < imageUrl.length; i++) {
                                let imgElement = document.createElement('img')
                                let id = i + 1
                                imgElement.setAttribute('id', 'page' + id)
                                imgElement.setAttribute('style', 'width:90%;margin-bottom:15px;box-shadow:0 0 25px 0 #ddd;')
                                imgElement.setAttribute('src', imageUrl[i])
                                tempDiv.appendChild(imgElement)
                            }
                        } else {
                            let imgElement = document.createElement('img')
                            imgElement.setAttribute('style', 'width:90%;margin-bottom:15px;box-shadow:0 0 25px 0 #ddd;')
                            imgElement.setAttribute('src', 'static/images/cry.gif')
                            tempDiv.appendChild(imgElement)
                        }
                        window.clearInterval(printTime)
                        console.log(tempDiv)
                    } catch (error) {}
                }
            }, 600)
        },
        getFileInfo() {
            let apiData = {
                interface: 'printTemplate',
                // userId: window.websocketUserInfo.result.USER_ID,
                userId: 1,
                fileId: this.$store.state.filePreciewList.fileId,
                clientId: this.cookie.get('clientId')
            }
            // 获取文件信息
            this.socket.sendMessage(apiData)
            this.setFileInfoWatcher()
        },
        doPrint() {
            var myDoc = {
                documents: document,
                settings: {
                    topMargin: 10,
                    leftMargin: 10,
                    bottomMargin: 10,
                    rightMargin: 10
                },
                copyrights: '杰创软件拥有版权  www.jatools.com' // 版权声明,必须
            }
            document.getElementById('jatoolsPrinter').print(myDoc, false)// 打印预览// 直接打印，不弹出打印机设置对话框
        },
        watcherPayStatus() {
            let alipayMoneyBack = setInterval(() => {
                if (window.alipayMoneyBack !== undefined) {
                    window.clearInterval(alipayMoneyBack)
                    console.log(window.alipayMoneyBack)
                    if (window.alipayMoneyBack.result !== undefined) {
                        this.doPrint()
                    }
                }
            }, 500)
        },
        setPayScanWatcher() {
            let playTime = setInterval(() => {
                if (window.AliPayCode !== undefined) {
                    window.clearInterval(playTime)
                    this.LoginQRvalue = window.AliPayCode.result.qr_code
                    this.watcherPayStatus()
                }
            }, 500)
        },
        customRouter() {
            this.$router.push({
                path: '/home'
            })
        },
        del() {
            // this.payPrint = false
            this.saoMa = false
        },
        substrict() {
            if (this.count > 1) {
                this.count--
                this.isB = true
                this.isD = true
            } else {
                this.count = 1
                this.isA = true
                this.isD = true
                this.isB = false
            }
            this.totalPrice = this.unitPrice * this.pageNum * this.count
        },
        add() {
            if (this.count < 10) {
                this.count++
                this.isB = true
                this.isD = true
            } else {
                this.count = 10
                this.isA = true
                this.isC = true
                this.isD = false
            }
            this.totalPrice = this.unitPrice * this.pageNum * this.count
        },
        // goBack() {
        //     this.payPrint = true
        //     this.saoMa = false
        // },
        Toggle() {
            this.notice = !this.notice
        },
        goPayment() {
            const TIME_COUNT = 60
            this.saoMa = true
            // this.printing = true
            // this.printFinish = true
            if (!this.timer) {
                this.seconds = TIME_COUNT
                this.timer = setInterval(() => {
                    if (this.seconds > 0 && this.seconds <= TIME_COUNT) {
                        this.seconds--
                    } else {
                        this.saoMa = false
                        clearInterval(this.timer)
                        this.timer = null
                    }
                    if (this.saoMa === false) {
                        this.seconds = 60
                    }
                }, 1000)
            }
            let apiData = {
                interface: 'alipayMoney',
                printNum: this.count,
                fileId: 1, // 测试使用 1成绩单打印 2在校证明
                // fileId: this.$store.state.filePreciewList.fileId, // 正式环境使用这个
                clientId: this.cookie.get('clientId'),
                userId: 1
            }
            console.log('apiData', apiData)
            this.socket.sendMessage(apiData)
            this.setPayScanWatcher()
        },
        continuePrint() {
            // this.$router.push({
            //     path: '/home'
            // })
            this.printFinish = false
            this.printing = true
        },
        timeValid() {
            if (this.timer > 1) {
                this.timer--
            } else {
                this.timer = 0
            }
        }
    },
    computed: {
        chartList() {
            let tempObj = []
            this.chartSample.map((item) => {
                let a = {
                    fileName: item.fileName,
                    fileContent: item.fileContent,
                    printNotice: item.fileNotice,
                }
                tempObj.push(a)
            })
            return tempObj
        },
        // userInfo() {
        //     let a
        //     if (this.$store.state.userInfo) {
        //         this.$store.state.userInfo.map((item) => {
        //             // if (item.genderCode === 1) {
        //             //     item.genderCode = '男'
        //             // } else {
        //             //     item.genderCode = '女'
        //             // }
        //             a = {
        //                 name: item.XM,
        //                 sex: item.XB,
        //                 college: item.XQMC,
        //                 stuNum: item.KEY_ID,
        //                 class: item.BJMC,
        //                 // level: '本科(四年)',
        //                 avtor: item.icon
        //             }
        //         })
        //     } else {
        //         this.$router.push({
        //             path: '/home'
        //         })
        //         return null
        //     }
        //     return a
        // }
    },
    components: {
        QrcodeVue,
        cjcNav: () => import('@/components/common/Nav.vue')
    }
}
</script>

<style lang="less" scoped>
@import '../lib/css/iconfont.css';
.preview-page {
    display: flex;
    flex-direction: column;
}
.header {
    width: 100%;
    height: 200px;
    background: -ms-linear-gradient(left,#4fadff,#00f3f5);
    .stuMessage {
        // float: left;
        background: white;
        // background: yellowgreen;
        width: 80%;
        height: 100%;
        margin: 10% 10% 0% 10%;
        border-radius: 30px;
        box-shadow: 2px 2px 5px #888888;
        .userImg {
            width:100px;
            height:100px;
            border-radius:50px;
            border:solid rgba(79,173,255,0.5) 5px;
            margin: -30px auto;
            background-color: white;
            img {
                margin-top: -2px;
                margin-left: -2px;
            }
        }
        .userMsg {
            width: 100%;
            text-align: left;
            margin-left: 20%;
            line-height: 25px;
            font-size: 15px;
            color: #666;
            tr {
                td {
                    span {
                        color: #111;
                    }
                }
            }
        }
        
    }
}
.daohang {
    background-color: rgba(255,255,255, 0);
    border: rgba(255,255,255, 0);
    color: white;
}
.ivu-icon {
    color: white;
}
.pageContent {
    width: 80%;
    height: 1300px;
    margin: 2% 10%;
    // float: left;
    background-color: #ffffff;
    margin-top: 12%;
    position: relative;
    .notice {
        width: 100%;
        padding-bottom: 30px;
        max-height: 130px;
        font-size: 20px;
        overflow: hidden;
        background-color: #f2f2f2;
    }
    .content {
        width: 100%;
        height: 1130px;
        // margin: 0% 10%;
        overflow: auto;
        background-color: #ffffff;
        text-align: center;
        .preview {
            width: 100%;
            height: 1120px;
            // background-color: white;
            // background-color: red;
            overflow: auto;
            padding-top: 20px;
            // margin-bottom: 10px;
        }
    }
    .page-watcher {
        height: 50px;
        width: 100%;
        // background: red;
        text-align: center;
        line-height: 50px;
        position: absolute;
        bottom: 0;
        div {
            display: inline-block;
            font-size: 15px;
            margin: 0px 10px;
        }
        .current-page {
            color:#339afe;
            margin: 0px 5px;
        }
        // position: fixed;
        // margin-top: -100px;
    }
}
.pageBottom {
    width: 100%;
    // float: left;
    position: absolute;
    bottom: 0;
    .printNum {
        height: 150px;
        text-align: center;
        .incenter {
            width: 35px;
            height: 35px;
            line-height: 35px;
            display: inline-block;
            text-align: center;
            margin-top: 60px;
            font-size: 25px;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .inbutton {
            width: 35px;
            height: 35px;
            line-height: 35px;
            display: inline-block;
            text-align: center;
            .iconfont {
                font-size: 38px;
            }
        }
        .inbuttonColorA {
            color: #e1e1e1;
        }
        .inbuttonColorB {
            color: #339afe;
        }
        .inright {
            width: 40px;
            height: 25px;
            line-height: 25px;
            display: inline-block;
            text-align: center;
            color:#595959;
            font-size:20px;
        }
    }
}
.printButton {
    height: 120px;
}
.printing {
    font-size: 30px;
    width: 100%;
    text-align: center;
    padding-top: 200px;
    color: #848484;
    height: 425px;
}
.printed {
    font-size: 30px;
    width: 100%;
    text-align: center;
    padding-top: 100px;
    color: #848484;
    height: 387px;
    .printedIcon {
        height: 120px;
        line-height: 120px;
        text-align: center;
        .printedIcon1 {
            font-size: 80px;
            color: #339afe;
        } 
    }
}
.goPrint {
    border:none;
    width:100%;
    font-size:20px;
    color:#009aff;
    border-radius: 10px;
}
.payPrintHeader {
    width: 100%;
    height: 300px;
    border-radius: 10px 10px 0px 0px;
    background: -ms-linear-gradient(left,#4fadff,#00f3f5);
    .payPrintHeaderTop {
        text-align:center;
        font-size:30px;
        color:white;
        padding-top:10px;
    }
    .payPrintHeaderContent {
        width: 100%;
        height: 190px;
        text-align: center;
        color: white;
        line-height: 220px;
    }
    .payPrintHeaderBottom {
        width: 100%;
        height: 60px;
        ul {
            height: 100%;
            width: 80%;
            margin-left: 70px;
            li {
                width: calc(~'98% / 3');
                height: 100%;
                display: inline-block;
                padding: 20px 15px 0px 15px;
                .countNum {
                    width: 48px;
                    height: 18px;
                    border-radius: 10px;
                    background-color: white;
                    text-align: center;
                    color: #25ccfe;
                    float: left;
                }
                .priceNum {
                    width: 30px;
                    height: 18px;
                    color: #fff;
                    text-align: center;
                    float: left;
                }
            }
        }
    }
}
.payPrintContent {
    height: 320px;
    .payPrintContentTop {
        height: 60px;
        width: 60px;
        float: right;
    }
    .payPrintContentContent {
        height: 320px;
        text-align: center;
        padding-top: 5%;
        padding-left: 10%;
    }
    .payPrintContentBottom {
        text-align: center;
        width: 100%;
        font-size: 15px;
        color: #818181;
    }
    .payPrintContentContent1 {
        text-align: center;
        width: 100%;
        height: 80px;
        line-height: 80px;
        font-size: 15px;
        color:#666666;
        // background-color: yellow;
        padding-left: 50px;
    }
    .payPrintContentBottom1 {
        width: 100%;
        height: 220px;
        text-align: center;
        padding: 15px;
        .payPrintContentAlipay {
            display: inline-block;
            width: 130px;
            height: 150px;
            margin: 20px;
            color: #818181;
        }
        .payPrintContentWechat {
            display: inline-block;
            width: 130px;
            height: 150px;
            margin: 20px;
            color: #818181;
        }
    }
}
.pay-cancel {
    border: none;
    width: 100%;
    height: 40px;
    font-size: 30px;
    text-align: center;
    color:#009afd;
}
// .ivu-modal {
//     .ivu-modal-wrap {
//         .ivu-modal-body {
//             padding: 0 !important;
//         }
//     }
// }

</style>
